<template>
    <div>
        <el-select filterable @select='handleSelectionChange' placeholder='请选择类型' v-model='suffix' class='handle-select mr10' style='width: 350px'>
            <el-option key=1 label='gcc' value='c'></el-option>
            <el-option key=2 label='g++' value='cpp'></el-option>
            <el-option key=3 label='java' value='java'></el-option>
            <el-option key=4 label='ruby' value='rb'></el-option>
            <el-option key=5 label='perl' value='pl'></el-option>
            <el-option key=6 label='pascal' value='pas'></el-option>
            <el-option key=7 label='go' value='go'></el-option>
            <el-option key=8 label='lua' value='lua'></el-option>
            <el-option key=9 label='python2' value='py'></el-option>
            <el-option key=10 label='python3' value='py'></el-option>
            <el-option key=11 label='haskell' value='hs'></el-option>
        </el-select>
        <div style='height: 20px'></div>
<!--        {{ codeUrl }}{{ suffix }}-->
        <el-upload
            class='upload-demo'
            drag
            :before-upload='beforeUpload()'
            :action='codeUrl'
            :limit='1'
            :on-success='handleUploadSuccess'
            :on-remove='handleUploadRemove'
        >
            <i class='el-icon-upload'></i>
            <div class='el-upload__text'>将文件拖到此处，或<em>点击上传</em></div>
            <div class='el-upload__tip' slot='tip'>只能上传不超过5MB的文件</div>
        </el-upload>
    </div>
</template>

<script>
export default {
    name: 'FileUpload',
    data() {
        return {
            upload: 0,
            suffix: 'c',
            codeUrl: '',
            id: -1
        };
    },
    methods: {
        handleUploadSuccess: function(response, file, fileList) {
            // console.log(response)
            this.upload = 1;
            this.$emit('upload', this.suffix)
        },
        handleUploadRemove: function() {
            this.upload = 0;
            this.$emit('remove', 0)
        },
        handleSelectionChange() {
            this.suffix = value
            this.id = key
            // this.codeUrl = `/api/uploadCode/${this.suffix}`;
            // console.log(this.codeUrl)
        },
        beforeUpload() {
            this.codeUrl = `/api/file/uploadCode/${this.suffix}`;
            console.log(this.codeUrl)
        }
    }
};
</script>

<style scoped>

</style>
